import React, { useState } from "react";
import "./GoodsImage.css";

export default function GoodsImage() {
  //声明状态
  let [images, setImages] = useState([
    "/goods/1.jpg",
    "/goods/2.jpg",
    "/goods/3.jpg",
    "/goods/4.jpg",
    "/goods/5.jpg",
  ]);
  //下标
  let [ind, setInd] = useState(3);

  return (
    <div className="goods-image">
      <div className="big-image">
        <img src={images[ind]} alt="" />
      </div>
      <div className="small-images">
        {images.map((item, index) => {
          return (
            <div key={index} className="item" onClick={() => {
              // 更新状态 ind
              setInd(index);
            }}>
              <img
                className={index === ind ? "active" : null}
                src={item}
                alt=""
              />
            </div>
          );
        })}
      </div>
    </div>
  );
}
